<template>
	<view class="pages-container">
		<home v-if="selected==0" ref="home" :onShow="isOnShow" 
			@onTabBarChange="onTabBarChangeBefore">
		</home>
		
		<vip v-if="selected==1" ref="vip" :onShow="isOnShow">		
		</vip>
	
		<message :enable="selected==2" ref="message" :onShow="isOnShow" @onUnreadNum="onUnreadMessage">		
		</message>
		
		<statistic v-if="selected==3">
		</statistic>
		
		<mine v-if="selected==4">
		</mine>

		<tbs-tabBarInPage v-model="selected" :tabBar="tabBar" @tabBarChangeEvent="onTabBarChange"
			@tabBarCreateEvent="onTabBarCreate">
		</tbs-tabBarInPage>

	</view>
</template>

<script>
	import home from "./components/home/index.vue"
	import vip from "./components/vip/index.vue"
	import message from "./components/message/index.vue"
	import statistic from "./components/statistic/index.vue"
	import mine from "./components/mine/index.vue"
	import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
	// import {checkUpdate} from "@/static/js/check-update"

	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex';
	const utils = require("@/static/js/utils.js")
	var that = null
	export default {
		data() {
			return {
				selected: 0,
				tabBar: {
					selected: 2,
					color: "#b2b2b2",
					selectedColor: "#ff7927",
					list: [{
							selectIconPath: "/pages/shop/static/image/tab_home_s.png",
							iconPath: "/pages/shop/static/image/tab_home_n.png",
							text: "首页",
							id: 0,
						}, {
							selectIconPath: "/pages/shop/static/image/tab_huiy_s.png",
							iconPath: "/pages/shop/static/image/tab_huiy_n.png",
							text: "客户",
							id: 1,
						},
						{
							selectIconPath: "/pages/shop/static/image/tab_xiaoxi_s.png",
							iconPath: "/pages/shop/static/image/tab_xiaoxi_n.png",
							text: "消息",
							id: 2,
							count: 0,
						},
						{
							selectIconPath: "/pages/shop/static/image/tab_shuju_s.png",
							iconPath: "/pages/shop/static/image/tab_shuju_n.png",
							text: "数据",
							id: 3,
						}, {
							selectIconPath: "/pages/shop/static/image/tab_my_s.png",
							iconPath: "/pages/shop/static/image/tab_my_n.png",
							text: "我的",
							id: 4,
						}
					]
				},
				isOnShow: true,
			}
		},

		computed: {
			...mapState({
				hasLogin: state => state.userInfo.hasLogin,
				isAuthPhone: state => state.userInfo.isAuthPhone,
				isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
				isSeller: state => state.userInfo.isSeller,
				sellerObj: state => state.userInfo.sellerObj,
				buyerObj: state => state.userInfo.buyerObj,
				shopInfo: state => state.userInfo.shopInfo,
				authTiktok: state => state.userInfo.authTiktok,
				authTiktokPermission: state => state.userInfo.authTiktokPermission,
			}),
		},

		components: {
			home,
			vip,
			message,
			statistic,
			mine
		},

		onLoad(option) {
			that = this
			// #ifdef APP-PLUS
			checkUpdate().then(res=>{
				console.log("@@@@@@@@@@@checkVersion", res)
			}).catch(err=>{
				console.log("@@@@@@@@@@@checkVersion err", err)
			})	
			// #endif
			
			// if (this.shopInfo && this.shopInfo.name) {
			// 	console.log("setNavigationBarTitle:", this.shopInfo.name)
			// 	uni.setNavigationBarTitle({
			// 		title: this.shopInfo.name
			// 	})
			// }
		},
		onShow() {
			that.isOnShow = true;
		},
		onHide() {
			that.isOnShow = false;
		},
		
		onReachBottom() {
			that.onReachBottomRefresh()
			console.log("onReachBottom")
		},
		
		methods: {
			onTabBarChangeBefore(id) {
				this.selected = id
				console.log("onTabBarChangeBefore", this.selected)
			},
			onTabBarChange(e) {
				this.selected = e.selected
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0,
					success: () => {

					}
				})
				console.log('tab 改变了，当前 tab 的 index 为：', e.selected)
			},
			onTabBarCreate(e) {
				console.log('create', e)
			},
			
			onReachBottomRefresh(){
				switch(that.selected){
					case 1:
						that.$refs.vip.onReachBottomRefresh()
						break;
					case 2:
						that.$refs.message.onReachBottomRefresh()
						break;	
					default:
						break;
				}
			},
			onUnreadMessage(count){
				for (var i in this.tabBar.list){
					var item = this.tabBar.list[i]
					if (item.id == 2){
						item.count = count;
					}
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #F3F3F3;
	}
</style>
<style lang="scss" scoped>
	.pages-container {
		width: 100%;
		background-color: #F3F3F3;
	}



	.messageTag {
		position: fixed;
		left: 52%;
		bottom: 50rpx;
		min-width: 36rpx;
		padding: 0;
		height: 36rpx;
		background-color: #ff4547;
		border-radius: 18rpx;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #ffffff;
		line-height: 36rpx;
		text-align: center;
		box-sizing: content-box;
		margin-bottom: env(safe-area-inset-bottom);
	}
</style>